<template>
	<view class="orders-item">
		<view @click="$emit('click', data)">
			<view class="top flex-space-between">
				<view class="flex-align">
					<view class="number">订单编号:31256544517</view>
					<van-tag color="rgba(242, 155, 247, 0.3)" text-color="rgb(235,53,246)" size="small">课程</van-tag>
				</view>
				
				<view class="status">
					<view class="red" v-if="data.status === 1">
						未支付
					</view>
					<view class="red" v-else-if="data.status === 2">
						申请退款
					</view>
					<view v-else-if="data.status === 3">
						已关闭
					</view>
				</view>
			</view>
			
			<view class="content d-flex">
				<van-image width="180rpx" height="180rpx" />
				
				<view class="right-content d-flex justify-space-between flex-column">
					<view>
						<view class="name ellipsis-2">{{ data.name }}</view>
						<view class="time">剩余支付时间:15:35:32</view>
					</view>
					<view class="flex-space-between">
						<price :value="data.price"></price>
						<view class="count">×{{ data.count }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom" v-if="showBtn">
			<view v-if="data.status === 1" class="flex-space-between">
				<text>倒计时:08:59:59</text>
				<view class="d-flex">
					<van-button round size="small" color="linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%)">付款提示</van-button>
				</view>
			</view>
			<view v-else-if="data.status === 2" class="d-flex justify-end">
				<van-button round size="small" plain color="rgb(99, 93, 247)">查看物流</van-button>
				<van-button round size="small" color="linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%)">确认收货</van-button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		data: {
			type: Object,
			required: true
		},
		showBtn: {
			type: Boolean,
			default: true
		}
	},
	options: {
	    styleIsolation: 'shared',
	}
}
</script>

<style lang="scss" scoped>
orders-item + orders-item .orders-item {
	margin-top: 30rpx;
}
	
.orders-item {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx 20rpx;
	box-shadow: 0px 13rpx 57rpx rgba(8,73,162,0.11);
	
	.top {
		font-size: 24rpx;
		font-weight: 700;
		
		.status {
			color: rgb(153,153,153);
		}
		
		.number {
			margin-right: 20rpx;
		}
		
		/deep/.van-tag {
			padding: 6rpx 20rpx !important;
		}
	}
	
	
	.content {
		margin-top: 30rpx;
		
		.right-content {
			margin-left: 24rpx;
			flex: 1;
			font-size: 28rpx;
		}
		
		.time {
			padding: 0 20rpx;
			background-color: rgb(243,243,243);
			display: inline-block;
			border-radius: 100px;
			margin-top: 20rpx;
		}
	}
	
	.bottom {
		font-size: 24rpx;
		
		> view {
			margin-top: 30rpx;
		}
		
		/deep/.van-button {
			width: 160rpx;
			height: 60rpx;
			margin-left: 20rpx;
		}
	}
}
</style>